<template>
  <div class="mainView">
    <div class="tabLeft">
      <leftBlock @function="showLeft"></leftBlock>
    </div>
    <div class="tabRight">
      <rightBlock :contractRight="datemsgFromson"></rightBlock>
    </div>
  </div>
</template>
<script>
import leftBlock from './components/leftBlock'
import rightBlock from './components/rightBlock'
export default {
  components: {
    leftBlock,
    rightBlock
  },
  data() {
    return {
      datemsgFromson: {
        id: 'id',
        name: 'name'
      }
    }
  },
  methods: {
    showLeft(data) {
      console.log('object :', 'showLeft')
      console.log('object :', data)
      this.datemsgFromson = data
    }
  }
}
</script>
<style lang="scss" scoped>
.mainView {
  width: 100%;
  height: 800px;
  .tabLeft {
    width: 280px;
    height: inherit;
    overflow-y: scroll;
    // overflow-y: auto;
    float: left;
    // background-color: rgb(248, 241, 250);
    z-index: 777;
    position: relative;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .tabRight {
    width: 100%;
    height: inherit;
    background-color: rgb(253, 253, 253);
    margin-left: 280px;
    float: left;
    position: absolute;
    z-index: 999;
  }
}
</style>
